import React, { Component } from 'react';

import {
    View,
    Text,
    ScrollView,
    Image,
    ListView,
    TouchableHighlight,
    TouchableOpacity
} from 'react-native';

import Style from './../style/index.style';

import szie from './../common/common.style';

import Swiper from 'react-native-swiper';

let BANNER = [
    {url:require('./../images/slider1.jpg')},
    {url:require('./../images/slider2.jpg')},
    {url:require('./../images/slider3.jpg')},
    {url:require('./../images/slider4.jpg')}
];

let SHOP = [
    {url:require("./../images/logo/tianmao.png"),title:"天猫"},
    {url:require("./../images/logo/juhuasuan.png"),title:"聚划算"},
    {url:require("./../images/logo/tmguoji.png"),title:"天猫国际"},
    {url:require("./../images/logo/waimai.png"),title:"外卖"},
    {url:require("./../images/logo/tmchaoshi.png"),title:"天猫超市"},
    {url:require("./../images/logo/chongzhi.png"),title:"充值中心"},
    {url:require("./../images/logo/lvyou.png"),title:"阿里旅行"},
    {url:require("./../images/logo/jinbi.png"),title:"领金币"},
    {url:require("./../images/logo/daojia.png"),title:"到家"},
    {url:require("./../images/logo/fenlei.png"),title:"分类"},
];

class IndexPage extends Component {
    constructor(){
        super();
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.id !== r2.id});
        this.state = {
            gifsList: ds.cloneWithRows([{id:1},{id:2},{id:3},{id:4}])
        };
    }
    render(){
       return(
           <View style={Style.Wraaper}>
               <View style={Style.navBar}>
                   <View style={Style.logo}>
                       <Image style={Style.logoImage} source={require('./../images/logo.png')} />
                   </View>
                   <View style={Style.sreachHoder}>
                       <View style={Style.sreachHoderInner}>
                           <Text style={Style.sreachHoderText}>寻找宝贝店铺</Text>
                       </View>
                   </View>
               </View>
               <ScrollView style={Style.scrollViewStyle}>
                   {BANNER.length > 0 &&
                   <Swiper style={Style.banners} showsButtons={false} autoplay={true} height={szie.$120}
                           paginationStyle={Style.defaultPag} renderPagination={this.renderPagination}>
                       {this.renderSlider(BANNER)}
                   </Swiper>}
                   <View style={Style.shopItemWrap}>
                       {this.renderShopItem(SHOP,[0,4])}
                       {this.renderShopItem(SHOP,[5,9])}
                   </View>
                   <View style={Style.line}></View>
                   <ListView dataSource={this.state.gifsList} contentContainerStyle={Style.gifsListWrap} renderRow={this.renderGifs.bind(this)}/>
               </ScrollView>
               <View style={Style.footerBar}>
                   <View style={Style.footerItem}>
                       <Text style={Style.footerItemText}>首页</Text>
                   </View>
                   <View style={Style.footerItem}>
                       <Text style={Style.footerItemText}>微淘</Text>
                   </View>
                   <View style={Style.footerItem}>
                       <Text style={Style.footerItemText}>社区</Text>
                   </View>
                   <View style={Style.footerItem}>
                       <Text style={Style.footerItemText}>购物车</Text>
                   </View>
                   <View style={Style.footerItem}>
                       <Text style={Style.footerItemText}>我的淘宝</Text>
                   </View>
               </View>
               {/*<View style={Style.loadingView}></View>*/}
           </View>
       )
    }
    renderSlider(banner){
      banner = banner || [];
      let nodes = banner.map(function (val,index) {
          return(
              <View style={Style.slider} key={index}>
                  <Image style={Style.sliderImage} source={val.url}></Image>
              </View>
          )
      });
      return nodes;
    }
    renderPagination(activeIndex){
       let nodes = BANNER.map(function (val,index) {
           let pagStyle = index == activeIndex ? Style.activePag : Style.defaultPag;
           return( <View style={pagStyle} key={index}></View> );
       });
       return ( <View style={Style.pagContair}>{nodes}</View> );
    }
    renderShopItem(shop,number = [0,1]){
        let nodes = shop.map((val,index) => {
            if(index >= number[0] && index <= number[1]) return(
                <View style={Style.itemList} key={index}>
                    <Image style={Style.itemListImage} source={val.url}></Image>
                    <Text style={Style.shopTitle}>{val.title}</Text>
                </View>
            )
        });
        return ( <View style={Style.shopItem}>{nodes}</View> );
    }
    renderGifs(list){
        let _self = this;
        return(
            <TouchableOpacity onPress={(function () {
               _self.goDetail()
            })}>
                <View style={[Style.gifsList]} >
                    <Image style={Style.gifsListImage} source={require("./../images/gifs/gifs3.jpg")}></Image>
                    <Text style={Style.gifsListText}>[为你推荐]简约帆布款保温包便当包加厚手提</Text>
                    <Text style={Style.gifPrices}>20元</Text>
                </View>
            </TouchableOpacity>
        )

    }
    goDetail(){
        let navigator = this.props.navigator;
        navigator.push({
            index:1
        })
    }
}

export default IndexPage;

